<template>
  <div>
    <div ref="legend" style="width:800px;height: 800px; background-color: pink;"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted () {
    this.setLegend()
  },
  methods: {

    setLegend () {
      // console.log(data);
      const obj = echarts.init(this.$refs.legend)
      // 给初始化好的对象,配置选
      const option = {
        title: {
          text: "标题"
        },
        // 指明当前的数据是什么类型的
        legend: {
          // 普通的图例,scroll
          type: 'plain'
        },
        // 网格,当网格多时候,变成数组,数组里边是一个个的配置
        grid: [
          { left: '7%', top: '7%', width: '38%', height: '38%' },
          { right: '7%', top: '7%', width: '38%', height: '38%' }
        ],
        // 柱状图
        xAxis: [
          {
            show: true,
            // 坐标轴位置
            // position: "top"
            type: "value", // 代表series里边数据取均值
            // type: "category" // 代表轴的数据从series里边获取
            // 显示在第一个坐标系
            gridIndex: 0
          },
          { type: "category", gridIndex: 1 }
        ],
        yAxis: [
          { gridIndex: 0 },
          { gridIndex: 1 }
        ],
        // 系列,系列里边有多个数据
        series: [
          {
            name: '销--量',
            // 散点图
            type: 'scatter',
            data: [
              [10.0, 8.04],
              [8.0, 6.95],
              [13.0, 7.58],
              [9.0, 8.81],
              [11.0, 8.33],
              [14.0, 9.96],
              [6.0, 7.24],
              [4.0, 4.26],
              [12.0, 10.84],
              [7.0, 4.82],
              [5.0, 5.68]
            ],
            // 显示在第1个坐标系
            xAxisIndex: 0,
            yAxisIndex: 0
          },
          {
            name: '销--量2222',
            // 散点图
            type: 'scatter',
            data: [
              [10.0, 8.04],
              [8.0, 6.95],
              [13.0, 7.58],
              [9.0, 8.81],
              [11.0, 8.33],
              [14.0, 9.96],
              [6.0, 7.24],
              [4.0, 4.26],
              [12.0, 10.84],
              [7.0, 4.82],
              [5.0, 5.68]
            ],
            xAxisIndex: 1,
            yAxisIndex: 1
          }
        ]
      }
      obj.setOption(option)
    }
  }
}
</script>

<style lang="less" scoped></style>
